import 'package:amoy_ticket/utils/object_util.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomeTabBarNine extends StatefulWidget {
  HomeTabBarNine({Key? key}) : super(key: key);

  @override
  _HomeTabBarNineState createState() => _HomeTabBarNineState();
}

class _HomeTabBarNineState extends State<HomeTabBarNine> {
  int selectIndex = 0;
  List homeTabNineList = [
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image1.png',
      'name': '[南京]话剧 《盗墓笔记4:蛇沼鬼城》南京站',
      'time': '2021.10.22-10.23',
      'place': '江苏荔枝大剧院',
      'distance': '9.9',
      'price': '449',
      'discount': '9.4',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image2.png',
      'name': '[南京]重喜剧《你若安好，那还了得》北纬零度出品',
      'time': '2021.08.29-09.20',
      'place': '国民小剧场',
      'distance': '9.2',
      'price': '94',
      'discount': '9.6',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image3.png',
      'name': '[南京]非常喜剧《大话东游》北纬零度出品',
      'time': '2021.09.21 周二 19:30',
      'place': '国民小剧场',
      'distance': '9.2',
      'price': '162',
      'discount': '9.6',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image4.png',
      'name': '[南京]绝对喜剧《二八八的别结婚》北纬零度出品',
      'time': '2021.08.29-09.20',
      'place': '国民小剧场',
      'distance': '9.2',
      'price': '9.6',
      'discount': '116',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image5.png',
      'name': '[南京]特别喜剧《我只是比较容易放弃》北纬零度出品',
      'time': '2021.009.11-09.21',
      'place': '国民小剧场',
      'distance': '9.2',
      'price': '114',
      'discount': '9.5',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image6.png',
      'name': '[南京]终极喜剧《名字没想好》北纬零度出品',
      'time': '2021.09.21 周二 14:00',
      'place': '国民小剧场',
      'distance': '9.2',
      'price': '115',
      'discount': '9.6',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image7.png',
      'name': '[南京]阿加莎名剧《谋杀启事》南京站',
      'time': '2021.11.13 周六 19:30',
      'place': '南京文化艺术中心大剧场',
      'distance': '9.0',
      'price': '',
      'discount': '',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image8.png',
      'name': '[南京]《南京喜事》-大型实景369°全沉浸互动演出',
      'time': '2021.09.30-10.07',
      'place': '南京喜事剧场',
      'distance': '7.2',
      'price': '',
      'discount': '',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image9.png',
      'name': '[南京]话剧《隔离》',
      'time': '2021.09.23 周四 19:30',
      'place': '江南剧院',
      'distance': '8.6',
      'price': '',
      'discount': '',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image10.png',
      'name': '[南京]2021南京音乐剧节·百老汇经典音乐剧《拜访森林》中文版',
      'time': '2021.09.22 周三 19:30',
      'place': '南京保利大剧院大剧场',
      'distance': '1.0',
      'price': '202',
      'discount': '',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image11.png',
      'name': '[南京]2021南京戏剧节·东野圭吾作品改编·悬疑舞台剧《回廊亭杀人事件》',
      'time': '2021.11.19-11.20',
      'place': '南京保利大剧院大剧场',
      'distance': '1.0',
      'price': '133',
      'discount': '',
    },
    {
      'imageUrl':
          'https://amoy-ticket.oss-cn-nanjing.aliyuncs.com/images/home_tab_eight/image12.png',
      'name': '[南京]阿加莎推理巨作《捕鼠器》南京站',
      'time': '2021.11.12 周五 19:30',
      'place': '南京文化艺术中心大剧场',
      'distance': '9.0',
      'price': '',
      'discount': '',
    },
  ];
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Center(child: _tabList()),
          Container(
            color: Color(0xFFf5f5f5),
            padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 15.h),
            child: Wrap(
              runSpacing: 10.h,
              alignment: WrapAlignment.spaceBetween,
              runAlignment: WrapAlignment.start,
              children: homeTabNineList.map((e) {
                return _widget(
                  e['imageUrl'],
                  e['name'],
                  e['time'],
                  e['place'],
                  e['distance'],
                  price: e['price'],
                  discount: e['discount'],
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _widget(String imageUrl, String name, String? time, String? space,
      String distance,
      {String? price, String? discount}) {
    return Container(
      width: MediaQuery.of(context).size.width / 2 - 20,
      child: Stack(
        children: [
          Column(
            children: [
              Container(
                height: 250,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6.r),
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: CachedNetworkImageProvider(imageUrl),
                  ),
                ),
                // height: 300,
              ),
              Container(
                margin: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 13.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      time ?? '',
                      style: TextStyle(color: Colors.grey),
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Text(
                            space ?? '',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                        // SizedBox(width: 3.w),
                        Expanded(
                          child: Text(
                            '${distance}km',
                            style: TextStyle(color: Colors.grey),
                          ),
                        )
                      ],
                    ),
                    ObjectUtil.isNotEmpty(price)
                        ? Row(
                            children: [
                              Text(
                                ObjectUtil.isNotEmpty(price) ? '￥$price' : '',
                                style: TextStyle(
                                    color: Colors.red, fontSize: 14.sp),
                              ),
                              Text(
                                '起',
                                style: TextStyle(color: Colors.grey),
                              ),
                            ],
                          )
                        : Container(
                            height: 15.h,
                          )
                  ],
                ),
              ),
            ],
          ),
          Positioned(
              right: 10.w,
              bottom: 7.h,
              child: Image.asset(
                'assets/images/want_to_see.png',
                width: 15.w,
                height: 15.w,
                color: Colors.black,
              )),
          ObjectUtil.isNotEmpty(discount)
              ? Positioned(
                  left: 0,
                  top: 0,
                  child: Container(
                    padding:
                        EdgeInsets.symmetric(horizontal: 2.w, vertical: 5.h),
                    child: Column(
                      children: [
                        Text(
                          '9.7',
                          style: TextStyle(
                              color: Colors.white, fontWeight: FontWeight.bold),
                        ),
                        Text(
                          '折起',
                          style: TextStyle(color: Colors.white),
                        ),
                      ],
                    ),
                    decoration: BoxDecoration(
                      color: Color(0xFFea4565),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4.r),
                        bottomRight: Radius.circular(4.r),
                      ),
                    ),
                  ),
                )
              : Container(),
        ],
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(4.r),
      ),
    );
  }

  Widget _tabList() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      child: Row(
        children: [
          _tabWidget('人气', 0),
          _tabWidget('折扣', 1),
          _tabWidget('最近开演', 2),
          _tabWidget('上新', 3),
          _tabWidget('距离', 4),
        ],
      ),
    );
  }

  _tabWidget(String text, int index) {
    return Row(
      children: [
        GestureDetector(
          child: Text(
            text,
            style: selectIndex == index
                ? _selectTextStyle()
                : _unSelectTextStyle(),
          ),
          onTap: () {
            selectIndex = index;
            setState(() {});
          },
        ),
        SizedBox(width: 15.w),
      ],
    );
  }

  _selectTextStyle() {
    return TextStyle(
        fontSize: 12.sp, color: Color(0xFF0f0f0f), fontWeight: FontWeight.bold);
  }

  _unSelectTextStyle() {
    return TextStyle(fontSize: 12.sp, color: Color(0xFF686868));
  }
}
